<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="../css/myapp.css">
		<style type="text/css">
			#manList {
				display: flex;
				justify-content: space-between;
			}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell{
				border-right: none;
			}
			.mui-media .icon {
			  width: 3em;
			  height: 3em;
			  vertical-align: -0.15em;
			  fill: currentColor;
			  overflow: hidden;
			}
			.dtlist{
				margin-top: 1em;
			}
			.mui-navigate-right .icon{
				width: 1.5em;
				height: 1.4em;
				vertical-align: -0.3em;
				fill: currentColor;
				overflow: hidden;
				margin-left: 9px;
				margin-right: 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a data-type="showtool" onclick="openWin()" class="mui-icon mui-icon-settings mui-pull-right"></a>
			<img id="touxiang" class="mui-pull-left" src=""/>
			<h1 class="mui-title">动态</h1>
		</header>
		<div id="manList">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-qqkongjian"></use>
						</svg>
						<div class="mui-media-body">好友动态</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-zuobiao"></use>
						</svg>
						<div class="mui-media-body">附近</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-xingqubula"></use>
						</svg>
						<div class="mui-media-body">兴趣部落</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="dtlist">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="youxi">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-youxi"></use>
						</svg>
						游戏
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="qiedianjing">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-shezhi"></use>
						</svg>
						企鹅电竞
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="haoyouweishi">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-yuan"></use>
						</svg>
						好友微视
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="haoyouweishi">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-qqyinle"></use>
						</svg>
						QQ音乐
					</a>
				</li>
				
			</ul>
		</div>
		
		<div class="dtlist">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="jingdonggouwu">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-shangcheng"></use>
						</svg>
						京东购物
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="chihewanle">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-shangcheng"></use>
						</svg>
						吃喝玩乐
					</a>
				</li>
			</ul>
		</div>
		
		<div class="dtlist">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="yundong">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-QQyundong"></use>
						</svg>
						运动
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" data-type="tengxunketang">
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-ketang2"></use>
						</svg>
						腾讯课堂
					</a>
				</li>
			</ul>
		</div>
		

		<script src="../js/mui.min.js"></script>
		<script src="../fonts/iconfont.js"></script>
		<script src="../js/myapp.js"></script>
		<script type="text/javascript">
			mui.init();
			var dongtaiShow = localStorage.getItem("dongtaiShow");
			if(dongtaiShow!=null){
				eachlist(dongtaiShow);
			}
			
			mui.plusReady(function() {
				curuserinfo=getSettings();
				document.getElementById("touxiang").setAttribute("src",baseutl+curuserinfo.picSm);
			});
			
			function eachlist(dongtaiShow){
				var jsonshowitem = JSON.parse(dongtaiShow);
				mui('.dtlist a').each(function() {
					//循环为每个开关赋值
					var status = this.getAttribute("data-type");
					if (jsonshowitem[status] == false) {
						//隐藏li元素s
						this.parentNode.classList.add("mui-hidden");
					}else{
						this.parentNode.classList.remove("mui-hidden");
					}
				});
			}
			
			
			//打开左侧菜单
			mui('header').on('tap', 'img', function(e) {
				var pmenu = plus.webview.getWebviewById("drag-left-menu");
				pmenu.show('slide-in-left', 200);
				setTimeout(function() {
					pmenu.evalJS("$('body>div:first').addClass('fullmsk')");
				}, 50);
			});
			
			//打开的动态设置
			mui('header').on('tap', 'a', function(e) {
				mui.openWindow({
					url: "setup/dongtai_set.html",
					id: "dongtai_set.html",
					show:{
					  autoShow:true,//页面loaded事件发生后自动显示，默认为true
					  aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
					  duration:200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
					},
					waiting:{
						autoShow:false
					}
				})
			});
			
			
		</script>

	</body>

</html>
